<template>
  <div class="loading" v-if="loading">
    <view class="load-more-animation">
      <view class="refresh car-circle-spinner">
        <image class="car animation" src="@/static/images/loading.svg" />
      </view>
    </view>
  </div>
</template>

<script>

export default {
  props: {
    loading: {
      type: Boolean,
      default: true,
    },
  },
  data: () => ({}),
  computed: {},
  methods: {},
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="less">
.loading {
  position: fixed;
  z-index: 999999;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	.load-more-animation {
		width: 100%;
		height: 100rpx;
		.refresh {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
		}
		.car-circle-spinner .car {
			width: 40rpx;
			height: 40rpx;
			&.animation {
				animation: halfCircle 1s infinite alternate;
			}
		}
		@keyframes halfCircle {
		  0% {
			transform: rotate(0deg);
		  }
		  100%{
			transform: rotate(360deg);
		  }
		}
	}
}
</style>
